<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="/template/StakeholderTemplate.xhtml">

    <ui:define name="contentInsert">
          <h3>Select Performance to add Area</h3>
                <h:form id="showUpdateForm">
                    <p:panel id="panel" >
                        <hr/>
                        <h2>Event Information: </h2>
                        <hr/>
                        <h:panelGrid columns="1" border="0">
                            <p:column>
                                <font style="font-weight: bold">Stakeholder:</font>
                                <br/>
                                <h:outputText value = "#{stakeholderPerformanceMB.stakeholderName}" />
                            </p:column>
                            <br/>
                            <p:column>
                                <font style="font-weight: bold">Event:</font>
                                <br/>
                                <h:outputText value = "#{stakeholderPerformanceMB.selectedEvent}" />
                            </p:column>
                        </h:panelGrid>
                        <h:inputHidden value = "#{stakeholderPerformanceMB.selectedEventId}" />
                        <hr/>
                       
                            <p:dataTable value="#{stakeholderPerformanceMB.getAllShow()}" var="shows"
                                         onRowSelectUpdate="showUpdateForm" selectionMode="single"
                                         selection="#{stakeholderPerformanceMB.showHelper}" 
                                         rowSelectListener="#{stakeholderPerformanceMB.updateSelectedShowFields()}"
                                         styleClass="order-table" paginator="true" rows="5"
                                         >
                                
                                <p:column>
                                    <f:facet name="header">Show ID</f:facet>
                                    <h:outputText id="showId" value="#{shows.id}" />
                                </p:column>

                                <p:column>
                                    <f:facet name="header">Timing</f:facet>
                                    <h:outputText id="showTiming" value="#{shows.timing}" />
                                </p:column>

                                <p:column>
                                    <f:facet name="header">Venue</f:facet>         
                                    <h:outputText id="eventVenue" value="#{shows.venue}" />
                                </p:column>
                            </p:dataTable> 
                       
                        <hr/>
                    </p:panel>
                    
                    <h3>Click on a row above add an area for show</h3>
                    <p:panel>
                        <p:ajaxStatus style="width:16px;height:16px;">
                            <f:facet name="start">
                                <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                            </f:facet>
                            <f:facet name="complete">
                                <h:outputText value="" />
                            </f:facet>
                        </p:ajaxStatus>
                        <p:messages />
                        <h:panelGrid columns="2" border="0">
                            <h:outputText value="Show Id: "  />  
                            <h:outputText value="#{stakeholderPerformanceMB.selectedShowId}"/>
                            <h:outputText value="Venue: "  />  
                            <h:outputText value="#{stakeholderPerformanceMB.selectedVenue}"/>
                            <h:outputText value="Date: "  />  
                            <h:outputText value="#{stakeholderPerformanceMB.showTiming}"/>
                            Area Name:
                            <p:panel>
                                <p:inputText required="true" requiredMessage="area name required!"
                                             id="areaName" value="#{stakeholderPerformanceMB.areaName}">
                                </p:inputText>
                            </p:panel>
                            Cost:
                            <p:panel>
                                <p:inputText required="true" requiredMessage="cost required!"
                                             id="areaCost" value="#{stakeholderPerformanceMB.cost}">
                                </p:inputText>
                            </p:panel>
                        </h:panelGrid>
                        <hr/>
                        <h:commandButton value="Add Area" 
                                        onclick="if ((!confirm('Add an Area for a show in Event ##{stakeholderPerformanceMB.selectedEventId}(#{stakeholderPerformanceMB.selectedEvent})?'))) return false"
                                        action="addselectedareashowevent.xhtml?faces-redirect=true"
                                        />
                    </p:panel>
                </h:form>
               </ui:define>
</ui:composition>